<template>
  <view class="mine-container">
    <view class="mine-info">
      <view class="head-img">
        <image :src="avatarUrl" mode=""></image>
      </view>
      <view class="mine-name">
        {{ myName }}
      </view>
      <view class="divider" />
      <view class="mine-fn" v-for="(item, index) in fnList">
        <view class="fn" @click="toFnPage(index)">
          {{ item.name }}
        </view>
      </view>
      <view class="out-btn" @click="logOut"> 退出登录 </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { loginOut } from '../../utils/modules/login'
import { useUserStore } from '@/stores/modules/user.js'
const userStore = useUserStore()
const myName = userStore.nickName
const avatarUrl = ref('')
avatarUrl.value = userStore.avatarUrl

const fnList = ref([
  {
    name: '待审批'
  },
  {
    name: '已审批'
  },
  {
    name: '项目经历'
  },
  {
    name: '成员列表'
  }
])
function logOut() {
  try {
    uni.removeStorageSync('token')
    uni.removeStorageSync('oid')
	loginOut().then((res) => {
		console.log(res);
	})
  } catch (e) {
    // error
  }
  uni.reLaunch({
    url: '../login/login'
  })
}
function toFnPage(index) {
  console.log(index)
  if (index == 0) {
    uni.navigateTo({
      url: '../FnPage/pending/pending'
    })
  } else if (index == 1) {
    uni.navigateTo({
      url: '../FnPage/fullfiled/fullfiled'
    })
  } else if (index == 2) {
    uni.navigateTo({
      url: '../FnPage/itemsExperience/itemsExperience'
    })
  } else {
    uni.navigateTo({
      url: '../FnPage/menberList/menberList'
    })
  }
}
</script>

<style lang="scss">
.mine-info {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.head-img {
  margin-top: 10%;
  border-radius: 50%;

  image {
    border-radius: 50%;
    width: 250rpx;
    height: 250rpx;
  }
}

.mine-name {
  justify-content: center;
  margin-top: 15rpx;
  font-size: 40rpx;
  margin-bottom: 5rpx;
}

.divider {
  background: #a7afb3;
  width: 50%;
  height: 5rpx;
  justify-content: center;
  margin-bottom: 10%;
}

.mine-fn {
  justify-content: center;
  height: 150rpx;

  .fn {
    border-radius: 50rpx;
    justify-content: center;
    align-items: center;
    display: flex;
    padding: 20rpx 10rpx;
    width: 300rpx;
    background: linear-gradient(to right, #6598f8, #46e1ff);
    font-size: 40rpx;
    opacity: 0.6;
    box-shadow: 2rpx 2rpx 1rpx 2rpx gray;
  }
}

.out-btn {
  border-radius: 40rpx;
  justify-content: center;
  align-items: center;
  display: flex;
  padding: 30rpx 10rpx;
  width: 500rpx;
  margin-top: 30rpx;
  background: linear-gradient(to right, #ff5313, #ff6c74);
  font-size: 35rpx;
}
</style>
